import React, { useState } from 'react'
// 1、引入 call-uikit 相关 API 对象
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es"; 

export default function VideoCall() {
  // 调用 TUICallKitServer.init API 登录组件，需要在代码中填写 SDKAppID、SecretKey 两个参数。
  const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
  const SDKSecretKey = '';   // TODO: Replace with your SDKSecretKey
  
  const [callerUserID, setCallerUserID] = useState('');
  const [calleeUserID, setCalleeUserID] = useState('');
  
  //【2】Initialize the TUICallKit component
  const init = async () => {
    const { userSig } = GenerateTestUserSig.genTestUserSig({ 
      userID: callerUserID,
      SDKAppID,
      SecretKey: SDKSecretKey,
    });
    await TUICallKitServer.init({
      userID: callerUserID,
      userSig,
      SDKAppID,
    });
    alert('TUICallKit init succeed');
  }

  // 4、调用 TUICallKitServer.call API 拨打通话。
  //【3】Make a 1v1 video call
  const call = async () => {
    await TUICallKitServer.call({
      userID: calleeUserID,
      type: TUICallType.VIDEO_CALL,
    });
  };

  return (
    <div>
      <h2>VideoCall</h2>
      {/* 2、引入<TUICallKit />，该组件包含通话时的完整 UI 交互。 */}
      <span> caller's ID: </span>
      <input type="text" placeholder='input caller userID' value={callerUserID} onChange={(event) => setCallerUserID(event.target.value)} />
      <button onClick={init}> step1. init </button> <br />
      <span> callee's ID: </span>
      <input type="text" placeholder='input callee userID' value={calleeUserID} onChange={(event) => setCalleeUserID(event.target.value)} />
      <button onClick={call}> step2. call </button>
      {/* 【1】Import the TUICallKit component: Call interface UI */}
      <TUICallKit />
    </div>

  )
}
